import React, { useState } from 'react';
import { Popover } from 'antd';
import IconFont from '@/components/IconFont';
import DownloadModal from './DownloadModal';
import styles from './index.module.less';

const Tools = ({ }) => {
  const [visible, setVisible] = useState(false);

  const modalProps = {
    visible,
    handleCancel(){
      setVisible(false);
    }
  }
  return (<>
    <div className={styles.toolsWrapper}>
      <div className={styles.toolsItem}>
        <div className='textSection'>
          <IconFont type='iconApp' className='toolIcon' />
          仓储APP下载
        </div>
        <Popover placement="left" content={<img src='https://imgniu.zhaojiafang.com/fontWeb/new-app-load.png' style={{width:240}} />}><div className='downloadBtn'>去下载</div></Popover>
      </div>
      <div className={styles.toolsItem}>
        <div className='textSection'>
          <IconFont type='iconbrowser' className='toolIcon' />
          浏览器下载
        </div>
        <div className='downloadBtn'  onClick={()=>window.open('https://www.google.cn/chrome')}>去下载</div>
      </div>
      <div className={styles.toolsItem}>
        <div className='textSection'>
          <IconFont type='icondayin' className='toolIcon' />
          打印组件下载
        </div>
        <div className='downloadBtn' onClick={()=>setVisible(true)}>去下载</div>
      </div>
      <div className={styles.toolsItem}>
        <div className='textSection'>
          <IconFont type='iconbrowser' className='toolIcon' />
          浏览器插件下载
        </div>
        <div className='downloadBtn'  onClick={()=>window.open('https://qiniu.zhaojiafang.com/plugins/zjf_zh.zip')}>去下载</div>
      </div>
    </div>
    {visible && <DownloadModal {...modalProps} />}
  </>)

}

export default React.memo(Tools, () => {
  return true
})